<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18-随机抽奖练习</title>
</head>
<body>
    <di cllass="wrapper">
        <strong>随机抽奖练习</strong>
        <h1>一等奖:<span id='one'>???</span></h1>
        <h3>二等奖:<span id='two'>???</span></h3>
        <h5>三等奖:<span id='three'>???</span></h5>
    </di>
    <script>
        const personArr = ['刘子杰', '冷科翰', '张旭川', '祝昊陨', '任梦廷']
        // 一等奖
        // 随机数 数组下标
        const random = Math.floor(Math.random() * personArr.length)
        // 获取one元素
        const one = document.querySelector('#one')
        // 把名字给one
        one.innerHTML = personArr[random]
        // 删除数组这个名字
        personArr.splice(random, 1)

        // 二等奖
        // 随机数 数组下标
        const random2 = Math.floor(Math.random() * personArr.length)
        // 获取two元素
        const two = document.querySelector('#two')
        // 把名字给two
        two.innerHTML = personArr[random2]
        // 删除数组这个名字
        personArr.splice(random2, 1)


        // 三等奖
        // 随机数 数组下标
        const random3 = Math.floor(Math.random() * personArr.length)
        // 获取three元素
        const three = document.querySelector('#three')
        // 把名字给three
        three.innerHTML = personArr[random3]
        // 删除数组这个名字
        personArr.splice(random3, 1)
    </script>
</body>
</html>